<template>
  <el-drawer :title="title" v-model="visible" :size="800" :before-close="() => {visible = false}">
    <section class="drawer-main">
      <el-row class="info-container">
        <el-col :span="12">
          <div class="info-block">
            <label>{{title.substring(0,2)}}名称：</label>
            <span>{{ data?.evtName || data?.svcName}}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-block">
            <label>状态：</label>
            <span>{{ data.httpStatus == 200?'成功':'失败' }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-block">
            <label>调用时间：</label>
            <span>{{ data.requestTime }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-block">
            <label>调用时长(ms)：</label>
            <span>{{ data.requestUseTime }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- <h5>查询参数</h5>
      <el-row class="">
        <el-col :span="24">
          <div class="full-area">
            <pre>
              {{data.queryString?JSON.parse(data.queryString) : '暂无'}}
            </pre>
          </div>
        </el-col>
      </el-row> -->
       <h5>请求参数</h5>
      <el-row class="">
        <el-col :span="24">
          <div class="full-area">
            <pre>
              {{data.requestBody?JSON.parse(data.requestBody) : '暂无'}}
            </pre>
          </div>
        </el-col>
      </el-row>
       <h5>响应参数</h5>
      <el-row class="">
        <el-col :span="24">
          <div class="full-area">
            <pre>
              {{data.response?JSON.parse(data.response) : '暂无'}}
            </pre>
          </div>
        </el-col>
      </el-row>
    </section>
  </el-drawer>
</template>

<script>
import { defineComponent, watch, computed, ref } from "vue";
import { updateFlowControl, getFlowControlDetail } from "@/api/application";
import useEditDrawer from "@/hooks/useEditDrawer";
export default defineComponent({
  name: "AppLogDetailDrawer",
  emits: ["update:modelValue","update:item"],
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "",
    },
     item: {
      type: Object,
      default: () => {}
    },
  },
  setup(props, { emit }) {
 
    const visible = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    }); // 是否显示该抽屉


    const data = computed({
      get: () => props.item,
      set: (val) => emit("update:item", val),
    }); // 是否显示该抽屉

    return {
      visible,
      data
    };
  },
});
</script>

<style lang="scss" scoped>
$height: 50px;

.drawer-main {
  height: calc(100% - 50px);
  overflow: auto;
}


h5 {
  margin: 20px 0;
  border-left: 4px solid #2e69eb;
  height: 16px;
  line-height: 18px;
  padding-left: 10px;
}

.info-container {
  padding: 15px 0;
  padding-left: 10px;

  .el-col {
    margin-bottom: 15px;
  }

  .info-block {
    label {
      font-size: 14px;
      font-weight: 600;
      color: #3c475d;
      line-height: 20px;
    }

    span {
      font-size: 14px;
      font-weight: 400;
      color: #3c475d;
      line-height: 20px;
    }
  }
}
.full-area {
  background-color: #f2f3f5;
  padding: 10px;
  min-height: 100px;
  line-height: 1.8em;
  pre{
    white-space: pre-line;
    overflow-wrap: break-word;
  }
}
</style>
